<template>
    <Header title="第一章 布局" />
    <div class="w-full p-4 bg-white shadow-sm">
        <!-- 1.1 aspect-ratio -->
        <Section title="1.1 aspect-ratio">
            <p class="mb-2">
                用于控制元素纵横比的工具，常用于媒体资源（图片、视频）展示，<strong
                    class="text-red-500 font-bold"
                    >需要指定父级元素的尺寸（长度或者高度）</strong
                >
            </p>
            <div class="flex gap-4">
                <div class="w-sm relative">
                    <div
                        class="absolute p-2 bg-[rgba(0,0,0,0.62)] text-white w-full"
                    >
                        aspect-square
                    </div>
                    <img
                        class="aspect-square object-cover"
                        src="https://fu5.web.sdo.com/10036/202502/17388940398666.jpg"
                        alt=""
                    />
                </div>
                <div class="w-sm relative">
                    <div
                        class="absolute p-2 bg-[rgba(0,0,0,0.62)] text-white w-full"
                    >
                        aspect-2/1
                    </div>
                    <img
                        class="aspect-2/1 object-cover"
                        src="https://fu5.web.sdo.com/10036/202502/17388940398666.jpg"
                        alt=""
                    />
                </div>
            </div>
        </Section>
        <!-- 1.2 columns -->
        <Section title="1.2 columns">
            <p class="mb-2">用于控制元素内列数的工具。</p>
            <div class="columns-3 md:columns-4 gap-4">
                <div
                    class="p-4 bg-green-500 text-white font-bold text-center mb-4"
                    v-for="i in 12"
                    :key="i"
                >
                    {{ i }}
                </div>
            </div>
        </Section>
        <!-- 1.3 break-after -->
        <Section title="1.3 break-after">
            <p class="mb-2">用于控制列或页面在元素后如何分页的工具。</p>
            <div class="columns-2 p-2 mb-2">
                <p class="p-2 bg-amber-400">1</p>
                <p class="break-after-column p-2 bg-green-500">2</p>
                <p class="p-2 bg-red-500">3</p>
                <p class="p-2 bg-blue-500">4</p>
            </div>
            <div class="columns-2 p-2">
                <p class="p-2 bg-amber-400">1</p>
                <p class="break-before-column p-2 bg-green-500">2</p>
                <p class="p-2 bg-red-500">3</p>
                <p class="p-2 bg-blue-500">4</p>
            </div>
        </Section>
        <!-- 1.4 box-sizing -->
        <Section title="1.4 box-sizing">
            <p class="mb-2">
                用于控制浏览器如何计算元素总大小的工具。默认box-border
            </p>
            <div class="flex gap-4">
                <div
                    class="border size-32 bg-amber-600 p-4 bg-clip-content box-border"
                ></div>
                <div
                    class="border size-32 bg-red-600 p-4 bg-clip-content box-content"
                ></div>
            </div>
        </Section>
        <!-- 1.5 display -->
        <Section title="1.5 display">
            <p class="mb-2">用于控制元素显示框类型的工具。</p>
            <div class="flex gap-4 w-full bg-amber-400 p-4 mb-4">
                <div class="size-20 border text-center leading-20">1</div>
                <div class="size-20 border text-center leading-20">2</div>
                <div class="size-20 border text-center leading-20">3</div>
                <div class="size-20 border text-center leading-20">4</div>
                <div class="size-20 border text-center leading-20">5</div>
            </div>
            <div class="bg-blue-400 p-4 mb-4">display：block</div>
            <div class="bg-sky-200 inline-block p-4 mb-4">display:inline</div>
        </Section>
        <!-- 1.6 float浮动 -->
        <Section title="1.6 float浮动">
            <p class="mb-2">用于控制元素周围内容封装的工具。</p>
            <div class="p-4 bg-cyan-500">
                TailwindCSS is
                <span class="float-left text-white font-bold">左浮动</span>
            </div>
        </Section>
        <!-- 1.7 clear 浮动 -->
        <Section title="1.7 clear浮动">
            <p class="mb-2">用于清除浮动。</p>
        </Section>
        <!-- 1.8 object-fit -->
        <Section title="1.8 object-fit">
            <p class="mb-2">用于控制如何调整替换元素内容大小的工具。</p>
            <div class="flex gap-4">
                <div>
                    <img
                        class="w-40 h-32 object-contain border"
                        src="https://fu5.web.sdo.com/10036/202503/17415786088824.png"
                        alt=""
                    />
                    <h2 class="font-bold text-center py-2">object-contain</h2>
                </div>
                <div>
                    <img
                        class="w-40 h-32 object-cover border"
                        src="https://fu5.web.sdo.com/10036/202503/17415786088824.png"
                        alt=""
                    />
                    <h2 class="font-bold text-center py-2">object-cover</h2>
                </div>
                <div>
                    <img
                        class="w-40 h-32 object-fill border"
                        src="https://fu5.web.sdo.com/10036/202503/17415786088824.png"
                        alt=""
                    />
                    <h2 class="font-bold text-center py-2">object-fill</h2>
                </div>
                <div>
                    <img
                        class="w-40 h-32 object-none border"
                        src="https://fu5.web.sdo.com/10036/202503/17415786088824.png"
                        alt=""
                    />
                    <h2 class="font-bold text-center py-2">object-none</h2>
                </div>
                <div>
                    <img
                        class="w-40 h-32 object-scale-down border"
                        src="https://fu5.web.sdo.com/10036/202503/17415786088824.png"
                        alt=""
                    />
                    <h2 class="font-bold text-center py-2">
                        object-scale-down
                    </h2>
                </div>
            </div>
        </Section>
        <!-- 1.9 object-position -->
        <Section title="1.9 object-position">
            <p class="mb-2">用于控制元素在盒子中的位置</p>
            <div class="flex gap-4">
                <div class="size-40 bg-amber-500">
                    <img
                        class="w-36 object-left-top border"
                        src="https://fu5.web.sdo.com/10036/202503/17415786088824.png"
                        alt=""
                    />
                </div>
                <div class="size-40 bg-amber-500">
                    <img
                        class="w-30 object-right border"
                        src="https://fu5.web.sdo.com/10036/202503/17415786088824.png"
                        alt=""
                    />
                </div>
            </div>
        </Section>
        <!-- 1.10 overflow -->
        <Section title="1.10 overflow">
            <p class="mb-2">用于控制元素溢出盒子的显示方式。</p>
            <div class="flex gap-4">
                <div class="size-40 bg-amber-500 overflow-auto">
                    <div class="size-60 bg-red-500">overflow-auto</div>
                </div>
                <div class="size-40 bg-amber-500 overflow-hidden">
                    <div class="size-60 bg-red-500">overflow-hidden</div>
                </div>
                <div class="size-40 bg-amber-500 overflow-clip">
                    <div class="size-60 bg-red-500">overflow-clip</div>
                </div>
                <div class="size-40 bg-amber-500 overflow-visible">
                    <div class="size-60 bg-red-500">overflow-visible</div>
                </div>
                <div class="size-40 bg-amber-500 overflow-scroll">
                    <div class="size-60 bg-red-500">overflow-scroll</div>
                </div>
                <div
                    class="size-40 bg-amber-500 overflow-x-auto overflow-y-hidden"
                >
                    <div class="size-60 bg-red-500">overflow-x-auto</div>
                </div>
            </div>
        </Section>
    </div>
</template>

<script setup>
import Header from "../../components/title";
import Section from "../../components/section";
</script>

<style></style>
